<template>
	<view class="page-song" :style="{backgroundImage:`url(${songs.al.picUrl || ''})`}">
		<scroll-view scroll-y :scroll-top="scrollTop" class="list">
			<view
			class="song"
			v-for="(item,index) in lyricList"
			:key="index"
			:class="{ 'active': index === currentLyricIndex }"
			>
				{{ item.text }}
			</view>
		</scroll-view>
		<view class="song-info">
			{{ songs.ar | forartists }} <br />
			{{ songs.name || '歌名'}}
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				lyricList:[],
				currentLyricIndex: 0,
				songs:null,
			}
		},
		computed: {
			scrollTop () {
				let oneHeight = 72 * app.rpxBili
				return (this.currentLyricIndex - 2) * oneHeight
			}
		},
		filters:{
			forartists(value){
				const arr =value.map(item=>item.name)
				return arr.join('/')
			}
		},
		methods: {
			getUrl(id){
				return new Promise((res, rej)=>{
					uni.request({
						url:`http://134.175.83.178:3000/song/url`,
						data:{
							id
						},
						success: ({ data }) => {
							const url = data.data[0].url
							res(url)
							// console.log(url)
						}
					})
				})
				
			},
			play(url) {
				app.audioCtx.stop()
				app.audioCtx.src = url
				app.audioCtx.play()
				
				app.audioCtx.onTimeUpdate(()=>{
					let currentTime = app.audioCtx.currentTime
					for(let i = this.currentLyricIndex; i < this.lyricList.length; i++){
						let item = this.lyricList[i]
						if(currentTime >= item.time){
							this.currentLyricIndex = i
						}
					}
				})
			},
			
			getLyric(id){
				return new Promise((res,rej)=>{
					uni.request({
						url:'http://134.175.83.178:3000/lyric',
						data:{
							id: id
						},
						success: ({ data }) => {
							res(data.lrc.lyric)
							// console.log(data.lrc.lyric)
						}
					})
				})
			},
			
			compiLyric(lyric){
				let result = []
				let arr = lyric.split('\n')
				for (let i = 0; i < arr.length; i++) {
					let item = arr[i]

					if (!item) continue

					let timeReg = /\[(.*)\]/ // 时间正则
					let text = item.replace(timeReg, '') 

					let timeStr = item.match(timeReg)[1]

					let min = parseInt(timeStr.split(':')[0])
					let sec = parseInt(timeStr.split(':')[1])
					let time = min * 60 + sec

					result.push({
						time,
						text
					})
				}
				this.lyricList = result
			},
			
			getsongs(id){
				uni.request({
					url:`http://134.175.83.178:3000/song/detail?ids=${id}`,
					success: (res) => {
						const { data } = res
						// console.log(data.songs[0].al)
						this.songs = data.songs[0]
					}
				})
			}
		},
		async onLoad(query) {
			const id = query.id || 1379416556
			const url = await this.getUrl(id)
			const lyric = await this.getLyric(id)
			
			// const lyric = await
			this.play(url)
			this.compiLyric(lyric)
			this.getsongs(id)
		}
	}
</script>

<style>
page {
	height: 100%;
}
.page-song{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
}
.list{
	text-align: center;
	width: 80vw;
	height: 360rpx;
}
.song{
	height: 72rpx;
	line-height: 72rpx;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.active {
  color: #ff0000;
}
.song-info{
	text-align: center;
	height: 72rpx;
}
</style>
